<template>
<!-- 自定义分页导航的封装 -->
  <div>
    <Page class="panel-page"
          :total="pageInfo.total"
          :current="pageInfo.pages"
          :page-size="pageInfo.size"
          :page-size-opts="pageizeOpts"
          @on-page-size-change="onPageZiseChange"
          @on-change="onChange"
          @on-prev="onPrev"
          @on-next="onNext"
          size="small"
          :show-elevator="showElevator"
          :show-sizer="showElevator"
          :show-total="showTotal" />
  </div>
</template>
<script>
export default {
  name: 'GbPage',
  props: {
    pageInfo: { type: Object, default: () => null },
    size: { type: String, default: () => { return 'samll' } },
    showElevator: { type: Boolean, default: () => true },
    showSizer: { type: Boolean, default: () => true },
    showTotal: { type: Boolean, default: () => true }
  },
  // v-model
  model: {
    /** 父组件用 v-model 此项可以从父组件接收数据 */
    prop: 'pageInfo',
    /** 返回数据给父组件 */
    event: 'returnPage'
  },
  data () {
    return {
      page: {
        desc: ['create_time'],
        pages: 0,
        size: 15,
        total: 0,
        current: 1
      },
      pageizeOpts: [5, 10, 15, 20, 30, 50, 100]
    }
  },
  watch: {
    /*    pageInfo(){
      console.log(pagaInfo);
    } */

  },

  methods: {
    /*    changePage(){
      this.page.current = this.page.pages * this.page.size;
      console.log(this.page);
      this.$emit('returnPage', this.page);
    },
    pagesizeChange(pageSize){
      //console.log("pageSize: %d",pageSize);
      this.page.size = pageSize;
      this.$emit('returnPage', this.page);
    }, */
    onPageZiseChange (pageSize) {
      console.log('onPageZiseChange: %o', pageSize)
      this.pageInfo.size = pageSize
      // this.page.current = this.page.pages * this.page.size;
      this.$emit('returnPage', this.pageInfo)
      this.$emit('changePage')
    },
    onChange (page) {
      // this.page.pages=page;
      this.pageInfo.current = page
      console.log('onChange:%o', page)
      this.$emit('returnPage', this.pageInfo)
      this.$emit('changePage')
    },
    onPrev (page) {
      // this.page.pages=page;
      /*      this.page.current = page;
      console.log("onPrev:%o",page);
      this.$emit('returnPage', this.page);
      this.$emit('changePage'); */
    },
    onNext (page) {
      // this.page.pages=page;
      /*      this.page.current = page;//this.page.pages * this.page.size;
      console.log("onNext:%o",page);
      this.$emit('returnPage', this.page);
      this.$emit('changePage'); */
    }

  }
}
</script>

